<template>
  <div>
    <div class="top">
      <div class="container clear-fix">
        <a href="">企业入口</a>
        <span>|</span>
        <a href="#">求职登陆</a>
      </div>
    </div>
    <header class="clear-fix">
      <div class="container">
        <div class="logo">
          <img src="@/assets/img/logo.png" alt="">
        </div>
        <span>|</span>
        <span class="text">专场招聘会</span>
      </div>
    </header>
    <HomeSearch></HomeSearch>
  </div>
</template>

<script>
import HomeSearch from "./Home-search";

export default {
  name: 'Home-header',
  components: {HomeSearch},
  data () {
    return {}
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/base.css';

.top {
  height: 22px;
  line-height: 22px;
  padding: 8px 0;

  a {
    float: right;
    padding: 0 10px;
    text-decoration: none;
    color: #828282;
    font-size: 14px;

    &:hover {
      color: pink;
    }
  }

  span {
    float: right;
  }
}

header {
  height: 50px;
  line-height: 50px;
  background-color: #318dd4;

  .logo {
    float: left;
    height: 50px;
    z-index: 5;

    &.hover {
      cursor: pointer;
    }

    img {
      height: 100%;
      object-fit: cover;
    }
  }

  span {
    float: left;
    padding: 0 10px;
    color: #ffffff;
  }

  .text {
    font-size: 18px;

    &:hover {
      color: pink;
      cursor: pointer;
    }
  }
}

</style>
